<template>
  <div id="app">
    <router-view></router-view>
    <ul class="nav" v-show="$route.meta.show">
      <li>
        <router-link :to="{path:'/shouye'}">首页</router-link>
      </li>
      <li>
        <router-link :to="{path:'/fenlei'}">分类</router-link>
      </li>
      <li>
        <router-link :to="{path:'/car'}">购物车</router-link>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      
    };
  },
  mounted(){
    console.log(this.$router);
  },
  components: {
    
  },
  methods:{
    
  },
  computed:{
    
  },
};
</script>

<style lang="scss" scoped>
  #app{
    font-size: 30px;
    padding-bottom: 80px;
    .nav{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 70px;
      background-color: pink;
      li {
        .router-link-active {
          color: red;
        }
      }
    }
  }
</style>
